<template>
    <div class>
        <Form ref="formData" :model="formData" :rules="formRules" :label-width="120">
            <Row>
                <!-- 差额/溢缴款金额 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="溢缴款" prop="amount">
                        <Row>
                            <InputNumber disabled
                                         :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                                         :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
                                         v-model="formData.amount"/>
                        </Row>
                    </FormItem>
                </Col>

                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="处理方式" prop="processMode">
                        <Select v-model="formData.processMode" clearable disabled>
                            <Option
                                v-for="(item,index) in dataDict.processModeDict"
                                :key="index"
                                :value="item.value"
                            >{{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <!--  退款银行/收款银行 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="退款银行" prop="bankName">
                        <Select v-model="formData.bankName" clearable :disabled="readOnly||isFinance">
                            <Option
                                v-for="(item,index) in dataDict.repaymentBankDict"
                                :key="index"
                                :value="item.value"
                            >{{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <!-- 收款/付款方式 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="付款方式" prop="termsPayment">
                        <Input type="text" v-model="formData.termsPayment" disabled/>
                    </FormItem>
                </Col>
                <!-- 支付至/支付人 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="支付至" prop="payer">
                        <Input type="text" v-model="formData.payer" :disabled="readOnly||isFinance"/>
                    </FormItem>
                </Col>

                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="退款账户" prop="refundAccount">
                        <Input type="text" v-model="formData.refundAccount" :disabled="readOnly||isFinance"/>
                    </FormItem>
                </Col>
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="分支行" prop="branchBank">
                        <Input type="text" v-model="formData.branchBank" :disabled="readOnly||isFinance"/>
                    </FormItem>
                </Col>
                <!-- 无数据 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="联行号" prop="processMode">
                        <Input type="text" v-model="formData.bankNo" :disabled="readOnly||isFinance"/>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>

    export default {
        props: {
            Obj: {
                type: Object,
            },
            dataDict: {
                type: Object
            },
            readOnly: {
                type: Boolean,
                require: true
            }
        },
        data() {
            return {
                isFinance: false,
                formRules: {},
                formData: {
                    amount: null,
                    processMode: "refund",
                    termsPayment: "线下"
                }
            };
        },
        created() {
        },
        mounted() {
            this.init();
            if (this.Obj.isFinance && !this.Obj.roleType) {
                this.isFinance = true;
            } else {
                this.isFinance = false;
            }
        },
        methods: {
            init() {
            },
        },
        computed: {}
    };
</script>
